<template>
  <div class="form_box">
    <div class="header">
      <a-breadcrumb>
        <a-breadcrumb-item><a @click="navBack">返回首页</a></a-breadcrumb-item>
        <a-breadcrumb-item>反馈</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"
      layout="vertical">
      <a-form-item label="请填写您对网站的问题反馈或建议吧～" name="remark" :rules="[{ required: true, message: '请输入建议' }]">
        <a-textarea v-model:value="formState.remark" placeholder="请描述详细信息" :rows="4"  :maxlength="80" />
      </a-form-item>
      <a-form-item label="上传具体截图， 我们会处理更快哦(只限一张哦~)">
        <MyUpload @uploadRes="uploadRes" :maxCount="1"></MyUpload>
      </a-form-item>
      <a-form-item label="您的电话 方便我们与您联系" name="phoneNumver" :rules="[{ required: true, message: '请输入联系方式' }]">
        <a-input v-model:value="formState.phoneNumver" placeholder="请输入联系方式" type="text" />
      </a-form-item>
      <a-form-item>
        <div style="text-align: center; margin-top: 20px;">
          <a-button type="primary" html-type="submit" size="large" block
            >反馈</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import MyUpload from '@/components/upload/index.vue'; // 确保路径正确
import { feedback } from '@/api/public';

const key = '加载中';
const router = useRouter();

interface FormState {
  remark: string;
  phoneNumver: string;
  ideaImg: File | string;
}

const formState = reactive<FormState>({
  remark: '',
  phoneNumver: '',
  ideaImg: ''
});

const uploadRes = (file: File) => {
  
  formState.ideaImg = file;
};

const onFinish = async (values: any) => {
  message.loading({ content: 'Loading...', key });
  const formData = new FormData();
  formData.append('idea', formState.remark);
  formData.append('mobile', formState.phoneNumver);
  formData.append('ideaImg', formState.ideaImg);

  const res = await feedback(formData);

  if (res.data.code != 0) return message.error({ content: res.data.msg, key, duration: 2 });
  message.success({ content: '反馈成功!', key, duration: 2 });
  router.push({ path: '/success' })
};

const onFinishFailed = (errorInfo: any) => {
  
  message.loading({ content: 'Loading...', key });
  setTimeout(() => {
    message.error({ content: '反馈失败!', key, duration: 2 });
  });
};

const navBack = () => {
  router.push({ path: '/' });
};
</script>

<style lang="scss" scoped>
.form_box {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px;

  .header {
    margin: 30px 0;
  }
}

.ant-upload-text {
  width: 128px;
  height: 128px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #eee;
  border-radius: 20px;
}
</style>
